<template>
  <div class="big" >
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width:100%;height:210px;" >
      <van-swipe-item v-for="(item,index) in goodsList.carousels" :key="index" >
        <img :src="item.carouselUrl" alt="" style="width:100%;height:210px;" />
      </van-swipe-item> 
    </van-swipe>
    <!-- 顶部搜索框 -->
    <div class="top">
      <b class="left"><van-icon name="wap-nav" /></b> 
      <div class="search">
        <b class="title">新峰商城</b>
        <input type="text" v-model="keywords" placeholder="山河无恙，人间皆安">
      </div>
      <div class="right" @click="goLogin">
        <span v-if="Local">
          <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
        </span>
        <span v-else>登录</span>
      </div> 
    </div>
    <!-- 导航区域 -->
    <nav>
      <div class="item" v-for="(item,index) in navs" :key="index" @click="pleaseOpen(index)">
        <img :src="item.imgUrl" style="width:35px;height:35px;">
        <span>{{item.title}}</span>
      </div>
    </nav>
    <!-- 新品上线 -->
    <div class="list">
      <p>新品上线</p>
      <div class="item">
        <div class="small" @click="detail(item.goodsId)" v-for="(item,index) in goodsList.newGoodses" :key="index">
          <img :src="item.goodsCoverImg" alt="" style="width:80px;height:80px" />
          <div class="title">{{item.goodsName}}</div>
          <div class="price">￥ {{item.sellingPrice}}</div>
        </div>
      </div>
    </div>
    <!-- 热门商品 -->
    <div class="list">
      <p>热门商品</p>
      <div class="item">
        <div class="small" @click="detail(item.goodsId)" v-for="(item,index) in goodsList.hotGoodses" :key="index">
          <img :src="item.goodsCoverImg" alt="" style="width:80px;height:80px" />
          <div class="title">{{item.goodsName}}</div>
          <div class="price">￥ {{item.sellingPrice}}</div>
        </div>
      </div>
    </div>
    <!-- 最新推荐 -->
    <div class="list">
      <p>最新推荐</p>
      <div class="item">
        <div class="small" @click="detail(item.goodsId)" v-for="(item,index) in goodsList.recommendGoodses" :key="index">
          <img :src="item.goodsCoverImg" alt="" style="width:80px;height:80px" />
          <div class="title">{{item.goodsName}}</div>
          <div class="price">￥ {{item.sellingPrice}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
import { useStore } from "vuex";
import { Toast } from "vant";
import api from "../http/api.js";
import { ref, reactive, computed, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    // 获取vuex
    const store = useStore();
    const keywords = ref("");
    const Local = ref("");
    const goodsList = reactive({
      carousels: [],
      hotGoodses: [],
      newGoodses: [],
      recommendGoodses: []
    });
    // 定义导航列表
    const navs = reactive([
      {
        title: "新峰超市",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png"
      },
      {
        title: "新蜂服饰",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png"
      },
      {
        title: "全球购",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png"
      },
      {
        title: "新蜂生鲜",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png"
      },
      {
        title: "新蜂到家",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png"
      },
      {
        title: "充值缴费",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png"
      },
      {
        title: "9.9元拼",
        imgUrl: "https://s.yezgea02.com/1604041127880/9.9%402x.png"
      },
      {
        title: "领劵",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png"
      },
      {
        title: "省钱",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png"
      },
      {
        title: "全部",
        imgUrl:
          "https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png"
      }
    ]);
    // 获取轮播图数据 新品 热门 商品最新推荐
    const getBanner = async () => {
      let res = await api.setBanner();
      goodsList.carousels = res.data.data.carousels;
      goodsList.hotGoodses = res.data.data.hotGoodses;
      goodsList.newGoodses = res.data.data.newGoodses;
      goodsList.recommendGoodses = res.data.data.recommendGoodses;
    };
    // 点击导航 提示敬请期待
    const pleaseOpen = index => {
      Toast("敬请期待");
    };
    // 去登录页面
    const goLogin = () => {
      if (Local.value == "") {
        store.commit("setTab", { act: -1, isShow: false });
        location.href = "/#/login";
      } else {
        store.commit("setTab", { act: 3, isShow: true });
        location.href = "/#/user";
      }
    };
    // 去详情
    const detail = id => {
      // console.log(id);
      store.commit("setTab", { act: -1, isShow: false });
      location.href = "/#/xiangqing/" + id;
    };
    // 挂载
    onMounted(() => {
      getBanner(); 
      Local.value = localStorage.getItem("token") || "";
      let head = document.querySelector(".top");
    });
    return {
      store,
      keywords,
      goodsList,
      getBanner,
      navs,
      pleaseOpen,
      Local,
      goLogin,
      detail
    };
  }
};
</script>

<style lang="scss" scoped>
.big {
  width: 100%;
  min-height: 1100px;
  background: pink;
  margin-bottom: 150px;
  .top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: red;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    b {
      font-weight: 700;
      font-size: 40px;
    }
    .search {
      flex: 1;
      margin: 0 30px;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      background: rgba(255, 255, 255, 0.7);
      display: flex;
      color: #1baeae;
      border-radius: 40px;
      .title {
        padding: 0 20px;
        box-sizing: border-box;
        border-right: 1px solid #666;
      }
      input {
        background: none;
        border: none;
        text-align: center;
      }
    }
    .right {
      font-size: 30px;
    }
  }
  .my-swipe .van-swipe-item {
    width: 100%;
    height: 210px;
  }
  nav {
    width: 100%;
    height: 210px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    .item {
      width: 20%;
      height: 105px;
      box-sizing: border-box;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
    }
  }
  .list {
    width: 100%;
    p {
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    .item {
      background: #fff;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .small {
        border: 1px solid black;
        width: 48%;
        height: 270px;
        margin: 0.5%;
        .price {
          color: red;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
